<!--
 * @Author: 胡海
 * @Date: 2020-11-20 18:27:11
 * @LastEditors: 胡海
 * @LastEditTime: 2020-11-20 23:03:02
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例筛选商品</title>
</head>
<body>
    <style type="text/css">
		body {
			font-size: 14px;
			font-family: "Lantinghei SC Extralight",Arial;
		}
		ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		img {
			vertical-align: top;
		}
		#wrap {
			width: 760px;
			height: 260px;
			margin: 100px auto;
			padding: 145px 120px 95px;
			background: url(../vue/例子/商品筛选/img/bg.jpg) no-repeat 0 0;
		}
		#section {
			width: 760px;
			height: 260px;
			-moz-box-shadow: 0px 0px 4px rgba(0,0,0,.2); 
			box-shadow: 0px 0px 4px rgba(0,0,0,.2);
		}
		#choose {
			width: 760px;
			height: 50px;
			margin: 0 auto;
			background: url(../vue/例子/商品筛选/img/nav_bg.png) no-repeat 0 0;
			line-height: 50px;
			text-indent: 21px;
		}
		#type {
			width: 100%;
			height: 210px;
			background: url(../vue/例子/商品筛选/img/type_bg.png) no-repeat 0 0;
			padding: 17px 0 16px 28px;
		}
		#type li {
			height: 44px;
			color: #8a8a8a;
			line-height: 44px;
		}
		#type a {
			margin: 0 12px 0 11px;
			color: #000;
		}
		#choose mark {      
			position: relative;
			display: inline-block;
			height: 24px;
			line-height: 24px;
			border: 1px solid #28a5c4;
			color: #28a5c4;
			margin: 12px 5px 0;
			background: none;
			padding: 0 30px 0 6px;
			text-indent: 0;
		}
		#choose mark a {
			position: absolute;
			top: 3px;
			right: 2px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: #28a5c4;
			color: #fff;
			line-height: 18px;
			font-size: 16px;
			text-align: center;
		}
		.active {
			background: rgb(40, 165, 196);
		}
	</style>
	<script type="text/javascript">
		let data = [
			{
				title: '品牌',
				list: ["苹果", "小米", "锤子", "魅族", "华为", "三星", "OPPO", "vivo", "乐视", "360", "中兴", "索尼"]
			},
			{
				title: '尺寸',
				list: ["3.0英寸以下", "3.0-3.9英寸", "4.0-4.5英寸", "4.6-4.9英寸", "5.0-5.5英寸", "6.0英寸以上"]
			},
			{
				title: '系统',
				list: ["安卓", "(", "Android", ")", "苹果", "(", "IOS", ")", "微软", "(", "WindowsPhone", ")", "无", "其他"]
			},
			{
				title: '网络',
				list: ["联通3G", "双卡单4G", "双卡双4G", "联通4G", "电信4G", "移动4G"]
			}
		]
	</script>
	<script src="../vue/src/vue.js"></script>
</head>
<body>
	<div id="wrap">
		<section id="section">
			<nav id="choose">
			你的选择:
			<!-- <mark>锤子<a href="javascript:;">x</a></mark> -->
			<mark @click="removeHandle(key)" v-for="item,key in choose">
				{{item}}
				<a href="javascript:;">x</a>
			</mark>
			</nav>
			<ul id="type">
				<li v-for="item,index in dataList">
					{{item.title}}：
					<a 
						href="javascript:;"
						v-for="option,i in item.list"
                        v-bind:class="{active: item.index === i}"
						@click="addChooseHandle(option,index,i)"
					>{{option}}</a>
				</li>
			</ul>
			
		</section>
	</div>
	<script type="text/javascript">
		/*
			{
				0:'苹果',
				1:'3.0'
			}

			key值不重复

			思路：用对象来存每一行选中的标签，把每一行下标作为key值

			需要给数据的每一行添加一个属性，属性用来记录选中的标签
		*/

		// 需要处理data，给每个身上加index
       
		data.forEach(item => item.index = -1);

		new Vue({
			el: '#wrap',
			data:{
				dataList: data,
				choose: {}  
			},
			methods: {
				addChooseHandle (option,index,i) {
					console.log(option); 
					// 这样给对象添加属性并不会响应
					//this.choose[index] = option;

					this.$set(this.choose,index,option)
					// 找到操作的一行，把这一行的数据中的index，设置为点击的标签的下标
					this.dataList[index].index = i;
				},
                removeHandle (key) {
                    console.log(this.choose);
                    console.log(key);
                    this.$delete(this.choose,key)
                    this.dataList[key].index = -1;
                }
			}
		})

	</script>
</body>
</html>